<template>
	<view class="content">
		<view class="banner">
			<swiper :indicator-dots="false" :autoplay="false" @change="swiperChange">
				<swiper-item v-for="(item,index) in detailData.images" :key="index" >
					<image :src="globalDataApi+item" mode=""></image>
				</swiper-item>
			</swiper>
			<view class="types">
				<view :class="types_item">
					{{swiperCurrent}}/{{detailData.images.length}}
				</view>
			</view>
		</view>
		<view class="detail">
			<view class="info">
				<view class="name">
					<view class="a">{{detailData.name}}</view>
					<!-- <view class="b">别名：xxx</view> -->
				</view>
				<view class="is_type">
					<view class="item" v-for="(item,index) in detailData.mainlabel" :key="index">
						{{item.name}}
					</view>
				</view>
				<view class="housing_num">
					<view class="span">
						<view class="number">
							<!-- {{detailData.price}} -->
							{{detailData.total_price}}<text>起</text>
						</view>
						<view class="tit">
							指导价 <uni-icons type="info-filled" color="#d8d8d8" style="margin-top: 3rpx;"></uni-icons>
						</view>
					</view>
					<view class="tiao"></view>
					<view class="span">
						<view class="number">
							<!-- {{detailData.prices}} -->
							{{detailData.house_type}}
							<!-- <text>元/套</text> -->
						</view>
						<view class="tit">
							户型
						</view>
					</view>
					<view class="tiao"></view>
					<view class="span">
						<view class="number">
							{{detailData.area}} 
							<!-- <text>㎡</text> -->
						</view>
						<view class="tit">
							面积<uni-icons type="info-filled" color="#d8d8d8" style="margin-top: 3rpx;"></uni-icons>
						</view>
					</view>
				</view>
				<view>
					<view class="huxing">
						户型信息
					</view>
					<view class="time">
						<view class="left">
							参考单价 <text> {{detailData.price}}</text>
						</view>
						<view class="right" style="text-decoration: underline;">
							获取价格表
						</view>
					</view>
					<view class="time">
						<view class="left">
							物业类型 <text>{{detailData.type}}</text>
							<view class="left" style="margin-left: 182rpx;">
								朝向 <text>{{detailData.toward}}</text>
							</view>
						</view>

					</view>
					<view class="time">
						<view class="left">
							首付占比 <text style="color: #3F58F1;"> {{detailData.payments}}</text>
						</view>
					</view>
					<view class="time">
						<view class="left">
							所属楼盘 <text>天河-天河北 越秀</text>
						</view>
						<view class="right" style="text-decoration: underline;">
							发送地址到手机
						</view>
					</view>
				</view>
				<view class="icons">
					<view class="icon">
						<uni-icons type="navigate" color="#FF5500" style="margin-top: 3rpx;"></uni-icons>
						<text>获取底价</text>
					</view>
					<view class="icon">
						<uni-icons type="home" color="#FF5500" style="margin-top: 3rpx;"></uni-icons>
						<text>预约算价</text>
					</view>
				</view>

			</view>
			<view class="mobile">
				<view class="left">
					<view class="phone">
						{{detailData.phone}}
					</view>
					<view class="sp">
						致电购房顾问了解更多信息
						<image src="/static/housingDetail/yuan_right.png" mode="widthFix"></image>
					</view>
				</view>
				<image class="icon" src="/static/housingDetail/icon_phone.png" mode=""></image>
			</view>
			<view class="housing_list">
				<view class="housing_type">
					<view class="housing_hread">
						<view class="q">
							推荐房源
						</view>
						<view class="w">
							更多房源<uni-icons type="right" color="#A1A6AC" style="margin-top: 3rpx;"></uni-icons>
						</view>
					</view>
					<view class="types">
						<view class="item">
							<image src="/static/housingDetail/dui.png" mode=""></image>
							<view class="name">
								一房一价
							</view>
						</view>
						<view class="item">
							<image src="/static/housingDetail/dui.png" mode=""></image>
							<view class="name">
								价格透明
							</view>
						</view>

					</view>
				</view>

				<view class="list">
					<view class="item" v-for="(item,index) in detailData.housing" :key="index">
						<view class="e">
							{{item.total_price}} 
							<!-- <text style="font-size: 22rpx;margin-left: 10rpx;">万</text> -->
						</view>
						<view class="r">
							{{item.price}}
						</view>
						<view class="t">
							{{item.house_name}}{{item.area}}
						</view>
						<view class="y">
							{{item.name}}
						</view>
					</view>
				</view>
			</view>

			<view class="ceping">
				<view class="title">
					日照模拟
				</view>
				<image class="img0" :src="globalDataApi+detailData.sunshine_image" ></image>
				<view class="go_det-1">
					查看完整日照分析
				</view>
				<image class="img1" :src="globalDataApi+detailData.image" mode="widthFix"></image>
				<view class="go_det">
					查看完整测评报告 >
				</view>
			</view>
			<view class="zixun">
				<view class="title">
					户型讲解
				</view>
				<view class="videoCC">
					 <video
					      id="myVideo"
					      :src="globalDataApi+detailData.video_image"
					      controls
					      poster="https://example.com/poster.jpg"
						  style="width: 100%;"
						  show-fullscreen-btn="false"
					    ></video>
				</view>
				<view class="go_det">
					查看完整户型讲解 >
				</view>
			</view>
			<view class="userList">
				<view class="title">
					开发商官方顾问
				</view>
				<view class="types">
					<view class="item">
						<image src="/static/housingDetail/dui.png" mode=""></image>
						<view class="name">
							直属开发商
						</view>
					</view>
					<view class="item">
						<image src="/static/housingDetail/dui.png" mode=""></image>
						<view class="name">
							售楼处接待
						</view>
					</view>
					<view class="item">
						<image src="/static/housingDetail/dui.png" mode=""></image>
						<view class="name">
							非经纪人
						</view>
					</view>
					<view class="item">
						<image src="/static/housingDetail/dui.png" mode=""></image>
						<view class="name">
							不赚差价
						</view>
					</view>
				</view>
				<view class="list">
					<view class="item" v-for="(item,index) in detailData.sale" :key="index">
						<image class="avatar" :src="globalDataApi+item.avatar" mode=""></image>
						<view class="right">
							<view class="name-time">
								<view class="name">
									{{item.nickname}}
								</view>
								<view class="time">
									免费服务999+人｜服务年限5年以上
								</view>
							</view>
							<view class="type-btn">
								<view class="type">
									<image src="/static/housingDetail/huo.png" mode="widthFix"></image>
									<text>活跃</text>
								</view>
								<view class="btns">
									<image class="img2" src="/static/housingDetail/success.png" mode="widthFix"></image>
									<image class="img1" src="/static/housingDetail/phone.png" mode="widthFix"></image>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<view class="dianping">
				<view class="title">
					用户点评 (879)
				</view>
				<view class="type">
					<view class="item" v-for="(item,index) in detailData.commenttags" :key="index">
						<text>{{item.name}} ({{item.count}})</text>
					</view>

				</view>
				<view class="list">
					<view class="item">
						<view class="user">
							<image class="avatar" :src="globalDataApi+detailData.comment.avatar" mode=""></image>
							<view class="nick">
								{{detailData.comment.nickname}}
							</view>
						</view>
						<view class="tit">
							{{detailData.comment.title}}
						</view>
						<view class="images">
							<image :src="globalDataApi+item" mode="" v-for="(item,index) in detailData.comment.images"></image>
						</view>
					</view>
				</view>
				<view class="go_det">
					我要点评 >
				</view>
			</view>
		</view>
		<view class="bottom">
			<view class="left">
				<view class="user">
					<image src="/static/housingDetail/avatar.png" class="avatar" mode=""></image>
					<view class="nick">
						李建安
					</view>
				</view>
				<view class="time">
					<image src="/static/housingDetail/time.png" class="time" mode=""></image>
					<view class="name">
						预约看房
					</view>
				</view>
			</view>
			<view class="right">
				<image src="/static/housingDetail/banner2.png" class="banner" mode=""></image>
				<view class="le">
					<image src="/static/housingDetail/mobile.png" class="phone" mode=""></image>
					<view class="name">
						售楼处
					</view>
				</view>
				<view class="ri">
					<image src="/static/housingDetail/liao.png" class="success" mode=""></image>
					<view class="name">
						聊一聊
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				globalDataApi: 'http://zysj.oss-cn-guangzhou.aliyuncs.com',
				type_index: 0,
				housing_type_index: 0,
				types2: [],
				type_index2: 0,
				ishtml: true,
				id: "1",
				tagsId: "",
				detailData: {},
				detailImage: "",
				houseInfoList: [],
				 swiperCurrent:1,
			}
		},
		onLoad(option) {
			console.log("传参数据---------", option)
			// this.id = option.id
			this.getinit()
		},
		methods: {
			getinit() {
				this.$api('api/properties/houseInfo', 'GET', {
					id: this.id
				}).then(res => {
					this.detailData = res.data
					// this.detailImage = res.data.properties_image
					console.log(res)
				})
			},
			swiperChange(e){
				this.swiperCurrent=e.detail.current+1
			},
			housetap_ind(item, index) {
				this.housing_type_index = index
			},
			housetap_ind2(item, index) {
				this.type_index2 = index
			},
			tapHtml() {
				this.ishtml = !this.ishtml
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #F6F6F6;
	}

	.banner {
		width: 100%;
		height: 422rpx;
		position: relative;

		swiper {
			width: 100%;
			height: 100%;

			swiper-item {
				width: 100%;
				height: 100%;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.types {
			width: 114rpx;
			height: 44rpx;
			text-align: center;
			line-height: 44rpx;
			overflow-x: auto;
			// display: flex;
			// align-items: center;
			background: rgba(0, 0, 0, 0.5);
			border-radius: 40rpx;
			font-size: 26rpx;
			position: absolute;
			bottom: 10rpx;
			right: 28rpx;
			color: #fff;

			.types_item {
				padding: 15rpx 30rpx;
			}

			.types_items {
				padding: 15rpx 30rpx;
				color: #222;
				background: #fff;
				border-radius: 40rpx;
			}
		}
	}

	.detail {
		padding: 20rpx;
		box-sizing: border-box;

		.info {
			padding: 20rpx;
			box-sizing: border-box;
			width: 100%;
			background: #fff;
			border-radius: 20rpx;

			.name {
				display: flex;
				align-items: center;

				.a {
					font-family: PingFang SC, PingFang SC;
					font-weight: 600;
					font-size: 36rpx;
					color: #131A20;
				}

				.b {
					font-weight: 400;
					font-size: 24rpx;
					color: #272B2D;
					margin-left: 20rpx;
				}
			}
		}

		.is_type {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			margin-top: 20rpx;

			.item {
				background: #FFFFFF;
				border-radius: 4rpx 4rpx 4rpx 4rpx;
				border: 2rpx solid #B9BCBE;
				padding: 5rpx 15rpx;
				font-weight: 400;
				font-size: 20rpx;
				color: #272B2D;
				text-align: center;
				margin-right: 20rpx;
			}
		}

		.housing_num {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: left;
			margin-top: 20rpx;

			.span {
				text-align: left;
				width: 220rpx;

				.number {
					font-family: PingFang SC, PingFang SC;
					font-weight: 600;
					font-size: 34rpx;
					// display: flex;
					// justify-content: center;
					align-items: flex-end;
					color: #FD5F4E;

					text {
						margin-left: 5rpx;
						font-weight: 500;
						font-size: 22rpx;
						color: #050709;
					}
				}

				.tit {
					font-weight: 400;
					font-size: 26rpx;
					color: #0B0F12;
					margin-top: 5rpx;
					display: flex;
				}
			}

			.tiao {
				width: 0;
				height: 44rpx;
				border: 2rpx solid #E4E4E4;
				margin-right: 30rpx;
			}
		}

		.huxing {
			font-family: PingFang SC, PingFang SC;
			font-weight: 600;
			font-size: 32rpx;
			color: #131A20;
			margin-top: 36rpx;
		}

		.time {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 20rpx 0;

			.left {
				display: flex;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #9EA4AB;

				text {
					margin-left: 20rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #55585D;
				}
			}

			.right {
				font-weight: 400;
				font-size: 24rpx;
				color: #0E97FF;
			}
		}

		.icons {
			display: flex;
			align-items: center;
			width: 100%;
			height: 108rpx;
			justify-content: space-between;

			.icon {
				width: 330rpx;
				height: 74rpx;
				background: #FFF4F1;
				border-radius: 0rpx 0rpx 0rpx 0rpx;
				text-align: center;
				line-height: 74rpx;
				// display: flex;
				// justify-content: center;
				// flex-wrap: wrap;

				image {
					width: 23rpx;
					height: 27rpx;
				}

				text {
					margin-top: 10rpx;
					width: 100%;
					font-weight: 400;
					font-size: 24rpx;
					color: #FF5500;
					text-align: center;
				}
			}
		}

		.error {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 20rpx;

			.left {
				display: flex;
				font-weight: 400;
				font-size: 24rpx;
				color: #989898;

				text {
					font-weight: 400;
					font-size: 26rpx;
					color: #505050;
				}
			}

			.right {
				font-weight: 400;
				font-size: 24rpx;
				color: #0E97FF;
				display: flex;
			}
		}

		.mobile {
			width: 100%;
			height: 138rpx;
			background: #FFF4F1;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			border: 2rpx solid #FCD5D1;
			margin: 20rpx 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 30rpx;
			box-sizing: border-box;

			.left {
				.phone {
					font-weight: 600;
					font-size: 48rpx;
					color: #FF901F;
				}

				.sp {
					font-weight: 600;
					font-size: 28rpx;
					color: #343434;
					display: flex;
					align-items: center;

					image {
						width: 25rpx;
						height: 25rpx;
						margin-left: 20rpx;
						margin-top: 3rpx;
					}
				}
			}

			.icon {
				width: 71rpx;
				height: 71rpx;
			}
		}

		.housing_list {
			width: 100%;
			height: 410rpx;
			background: #fff;
			// padding: 20rpx;
			// box-sizing: border-box;
			border-radius: 20rpx;
			// margin: 20rpx 0;

			.housing_type {
				width: 100%;
				height: 152rpx;
				background-image: url('');
				// border: 1rpx solid red;
				background-size: cover;
				background-position: center;
				background-repeat: no-repeat;

				.housing_hread {
					width: 98%;
					margin: 32rpx auto;
					box-sizing: border-box;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.q {
						margin-left: 18rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 600;
						font-size: 32rpx;
						color: #131A20;
					}

					.w {
						margin-right: 18rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #A1A6AC;
					}
				}

				.types {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: left;
					margin-left: 18rpx;

					.item {
						display: flex;
						align-items: center;
						margin-right: 18rpx;

						image {
							width: 30rpx;
							height: 30rpx;
						}

						.name {
							font-weight: 400;
							font-size: 24rpx;
							color: #919191;
							margin-left: 5rpx;
						}
					}
				}

			}

			.title {
				font-weight: 600;
				font-size: 30rpx;
				color: #4B4F50;
				margin: 20rpx 0;
			}

			.types {
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				margin-top: 10rpx;

				.types_item {
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					border: 2rpx solid #F2F2F2;
					font-weight: 400;
					font-size: 22rpx;
					color: #8E8E8E;
					padding: 5rpx 15rpx;
					margin-right: 20rpx;
				}

				.types_items {
					background: linear-gradient(180deg, #FE6D4F 0%, #EC8D39 100%);
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					border: 2rpx solid transparent;
					font-weight: 400;
					font-size: 22rpx;
					color: #FFFFFF;
					padding: 5rpx 15rpx;
					margin-right: 20rpx;
				}
			}

			.list::-webkit-scrollbar {
				width: 0;
				height: 0;
				background: transparent;
			}

			.list {
				width: 100%;
				display: flex;
				justify-content: left;
				align-items: center;
				overflow: auto;
				margin-top: 20rpx;

				.item {
					width: 244rpx;
					height: 224rpx;
					background: #FFFFFF;
					border: 2rpx solid #EDEFF0;
					margin-right: 20rpx;

					.e {
						margin-left: 14rpx;
						margin-top: 18rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 600;
						font-size: 36rpx;
						color: #FD503E;
					}

					.r {
						margin-left: 14rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #1E2124;
					}

					.t {
						margin-left: 14rpx;
						margin-top: 20rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 28rpx;
						color: #0A0D0E;
					}

					.y {
						margin-left: 14rpx;
						margin-top: 6rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #1E2124;
					}
				}


			}

		}

		.userList {
			width: 100%;
			background: #FFFFFF;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			padding: 30rpx 20rpx;
			box-sizing: border-box;
			margin: 20rpx 0;

			.title {
				font-weight: 600;
				font-size: 32rpx;
				color: #1C1C1C;
				margin-bottom: 20rpx;
			}

			.types {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.item {
					display: flex;
					align-items: center;

					image {
						width: 30rpx;
						height: 30rpx;
					}

					.name {
						font-weight: 400;
						font-size: 24rpx;
						color: #919191;
						margin-left: 5rpx;
					}
				}
			}

			.list {
				width: 100%;
				margin-top: 20rpx;

				.item {
					width: 100%;
					background: #FFF4F1;
					padding: 15rpx;
					box-sizing: border-box;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.avatar {
						width: 114rpx;
						height: 114rpx;
						border-radius: 50%;
					}

					.right {
						width: 80%;

						.name-time {
							width: 100%;
							display: flex;
							align-items: center;
							justify-content: space-between;

							.name {
								font-weight: 500;
								font-size: 32rpx;
								color: #04070A;
							}

							.time {
								font-weight: 400;
								font-size: 24rpx;
								color: #919191;
							}
						}

						.type-btn {
							display: flex;
							align-items: center;
							justify-content: space-between;

							.type {
								display: flex;
								align-items: center;

								image {
									width: 30rpx;
									height: 30rpx;
								}

								text {
									font-weight: 400;
									font-size: 24rpx;
									color: #919191;
									margin-left: 10rpx;
								}
							}

							.btns {
								width: 200rpx;
								display: flex;
								align-items: center;
								justify-content: space-around;

								image {
									width: 52rpx;
									height: 52rpx;
								}
							}
						}
					}
				}
			}
		}


		.ceping {
			width: 100%;
			background: #FFFFFF;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			padding: 30rpx 20rpx;
			box-sizing: border-box;
			margin: 20rpx 0;

			.title {
				font-weight: 600;
				font-size: 32rpx;
				color: #1C1C1C;
				margin-bottom: 20rpx;
			}

			.img0 {
				width: 100%;
				height: 264rpx
			}

			.img1 {
				width: 100%;
				height: 300rpx;
			}

			.go_det-1 {
				width: 688rpx;
				height: 74rpx;
				line-height: 74rpx;
				background: #FFF4F1;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #FF5500;
				text-align: center;
				font-style: normal;
				text-transform: none;
				margin-bottom: 20rpx;
				margin-top: 10rpx;
			}

			.go_det {
				width: 100%;
				height: 104rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 0rpx 12rpx 2rpx rgba(0, 0, 0, 0.1);
				border-radius: 10rpx 10rpx 10rpx 10rpx;
				font-weight: 500;
				font-size: 28rpx;
				color: #FF5500;
				line-height: 104rpx;
				text-align: center;
			}
		}

		.zixun {
			width: 100%;
			background: #FFFFFF;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			padding: 30rpx 20rpx;
			box-sizing: border-box;
			margin: 20rpx 0;

			.title {
				font-weight: 600;
				font-size: 32rpx;
				color: #1C1C1C;
				margin-bottom: 20rpx;
			}

			// .videoCC{
			// 	video{
			// 		width: 100%;
			// 		height: 100%;
			// 	}
			// }


			.go_det {
				width: 100%;
				height: 88rpx;
				margin-top: 20rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 0rpx 12rpx 2rpx rgba(0,0,0,0.1);
				border-radius: 10rpx 10rpx 10rpx 10rpx;
				font-weight: 500;
				font-size: 28rpx;
				color: #FF5500;
				line-height: 88rpx;
				text-align: center;
			}
		}

		.dianping {
			width: 100%;
			background: #FFFFFF;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			padding: 30rpx 20rpx;
			box-sizing: border-box;
			margin: 20rpx 0;

			.title {
				font-weight: 600;
				font-size: 32rpx;
				color: #1C1C1C;
				margin-bottom: 20rpx;
			}

			.type {
				width: 100%;
				display: flex;
				align-items: center;
				flex-wrap: wrap;

				.item {
					background: #F7F9F9;
					border-radius: 36rpx 36rpx 36rpx 36rpx;
					padding: 20rpx 30rpx;
					font-weight: 400;
					font-size: 22rpx;
					color: #2A2B2E;
					margin-right: 30rpx;
					margin-bottom: 20rpx;
				}
			}

			.list {
				width: 100%;

				.item {
					width: 100%;
					margin-bottom: 10rpx;

					.user {
						width: 100%;
						display: flex;
						align-items: center;
						margin-bottom: 20rpx;

						.avatar {
							width: 76rpx;
							height: 76rpx;
							border-radius: 50%;
							background: #ccc;
						}

						.nick {
							font-weight: 500;
							font-size: 28rpx;
							color: #2A2B2E;
						}
					}

					.tit {
						font-weight: 400;
						font-size: 28rpx;
						color: #2A2B2E;
					}

					.images {
						width: 100%;
						display: flex;
						align-items: center;
						flex-wrap: wrap;
						justify-content: left;
						margin-top: 20rpx;

						image {
							width: 218rpx;
							height: 222rpx;
							background: #ccc;
							margin-bottom: 5rpx;
							margin-right: 7rpx;
						}
					}
				}
			}

			.go_det {
				width: 100%;
				height: 104rpx;
				margin-top: 20rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 0rpx 12rpx 2rpx rgba(0, 0, 0, 0.1);
				border-radius: 10rpx 10rpx 10rpx 10rpx;
				font-weight: 500;
				font-size: 28rpx;
				color: #FF5500;
				line-height: 104rpx;
				text-align: center;
			}
		}
	}

	.bottom {
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		height: 142rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(0, 0, 0, 0.16);
		display: flex;
		align-items: center;
		padding: 20rpx;
		box-sizing: border-box;

		.left {
			width: 40%;
			display: flex;
			align-items: center;

			.user {
				width: 50%;
				text-align: center;

				image {
					width: 54rpx;
					height: 54rpx;
				}

				.nick {
					font-weight: 400;
					font-size: 26rpx;
					color: #04070A;
				}
			}

			.time {
				width: 50%;
				text-align: center;
				margin-top: 10rpx;

				image {
					width: 36rpx;
					height: 36rpx;
				}

				.name {
					font-weight: 400;
					font-size: 26rpx;
					color: #9F9F9F;
				}
			}
		}

		.right {
			width: 60%;
			position: relative;
			display: flex;
			align-items: center;
			justify-content: space-evenly;

			.banner {
				position: absolute;
				width: 100%;
				height: 88rpx;
			}

			.le {
				width: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-top: 20rpx;

				.phone {
					width: 29rpx;
					height: 27rpx;
					position: relative;
					margin-right: 10rpx;
				}

				.name {
					font-weight: 500;
					font-size: 28rpx;
					color: #FFFFFF;
					position: relative;
				}
			}

			.ri {
				width: 50%;
				display: flex;
				align-items: center;
				justify-content: center;

				.success {
					width: 43rpx;
					height: 33rpx;
					position: relative;
					margin-right: 10rpx;
				}

				.name {
					font-weight: 500;
					font-size: 28rpx;
					color: #FFFFFF;
					position: relative;
				}
			}
		}
	}
</style>
